<template>
  <div class="todo-footer">
    <label>
      <!--全选&全不选按钮-->
      <!--当computedLength === total时 且 他们不能等于0时;当前这个复选框要选中-->
      <input type="checkbox" v-model="checkAll" :disabled="disabled"/>
    </label>
    <span>
        <span>
          已完成<strong style="color: red">{{computedLength}}</strong>
        </span>
        <span>
           / 全部<strong style="color: green">{{total}}</strong>
        </span>
    </span>
    <button class="btn btn-danger" @click="clear">清除已完成任务</button>
  </div>
</template>

<script>
    export default {
        name: "todo-footer",
        props:["list"],
        data(){
          return {
            disabled:false
          }
        },
        computed:{
          total(){return this.list.length},
          computedLength(){
            /*var length = 0;
            this.list.forEach((item)=>{
              if (item.checked){
                length++
              }
            })
            return length*/

            return this.list.reduce((adder,item)=>{
                return adder += (item.checked ? 1 : 0)
            },0)
          },
          checkAll:{
            get(){
              // 1.当computedLength === total时
              // 2. computedLength total不能同时等于0
              //console.log((this.computedLength === this.total) && !(this.computedLength===0&&this.total===0));
              return (this.computedLength === this.total) && !(this.computedLength===0&&this.total===0)
            },
            set(val){
               //和app组件进行通信 将当前复选框的勾选状态传递到app组件中
               this.$bus.$emit("checkAll",val)
            }
          }
        },
        methods:{
          //清除已完成任务
          clear(){
            //通知app组件将已完成的任务全部清除
            this.$bus.$emit("clear")
          }
        },
        //在todo-footer组件被加载时要判断全选框是否能操作!!!
        //如果total 和  computedLength 同时等于0的话
        //那么这个全选框应该是禁用状态
        //如果没有满足以上条件那么全选框应该是可用状态
        /*mounted(){
          //钩子没选对   计算属性的值还没确定
          console.log(this.total);
          if(this.total===0 && this.computedLength===0){
            this.disabled = true
          }
        }*/
        updated(){
          //当footer组件中的数据产生改变时 并且对应的界面的虚拟dom已经更新完毕
          console.log(this.total);
          //在update中我们可以保证计算属性的值得到了更新!
          if(this.total===0 && this.computedLength===0){
            this.disabled = true
          }else {
            this.disabled = false
          }
        }
    }
</script>

<style scoped>

  /*footer*/
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>
